<template>
  <div>
    <div class="login">登录页面</div>
    <el-button type="primary" @click="onSubmit">登录登录</el-button>
    <el-button type="primary" @click="counter.increment">count++</el-button>
    <el-button type="primary" @click="counter.randomizeCounter">count随机</el-button>
    <p>Double {{count}} is {{ double }}</p>
    <p>count:{{ count }}</p>
    <p>计算属性：{{ double }}</p>
    <EmptyTable :top="'60px'" :empty="empty" :emptyText="'暂无域名数据'" :emptySearch="'暂未搜索到相关域名数据'"></EmptyTable>


    <!-- 动态使用icon -->
    <!-- <component :is="iconName"></component> -->
  </div>

</template>

<script lang="ts" setup name="login">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '@/http/api/login/index';

// 使用pinia
import { storeToRefs } from 'pinia';
import useStore from '@/store/index';

const iconName = 'Select'
const { counter } = useStore();
// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter);

const router = useRouter();
// 缺省图状态
let empty = reactive({
  status: false, //false数据没有，true搜索没有
});

// do not use same name with ref
const form = reactive({
  userAccount: 'miyuki',
  password: '123456',
});

const onSubmit = async () => {
  const data = await login(form);
  console.log(data, 55555);
  if (data) {
    router.push({ path: '/loginout' });
  }
};
</script>

<style lang="less" scoped></style>
